<template>
  <view>
    <!-- top图片 -->
    <view class="topcontainer">
      <image :src="discountList.bannerPicture" :mode="aspectFit"></image>
    </view>
    <view class="tab">
      <scroll-view class="tabbox" scroll-x>
        <view v-for="item in tabList" :key="item.id" :class="{'tabbox-item':true,'active':params.subType === item.id}"
          @click="changeActive(item.id)">
          {{item.title}}
        </view>
      </scroll-view>
    </view>
    <!-- 商品信息 -->
    <view class="goods-list">
      <view class="goods-list-item" v-for="(item,i) in goodsList" :key="i" @click="gotoGoodsDetail(item)">
        <view class="everygoods">
          <image :src="item.picture"></image>
          <text class="up">{{item.name}}</text>
          <text class="down">￥{{item.price}}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    getDiscount
  } from '@/api/recommend.js'
  export default {
    data() {
      return {
        params: {
          subType: "912000341",
          pageSize: 10,
          page: 1,
        },
        total: 0, //总数
        discountList: [], //接口数据
        tabList: [], //导航栏数据
        goodsList: [], //商品数据
        isLoading: false,
        count: 0
      };
    },
    onLoad() {
      this.getDiscount()
      // console.log(options);
    },
    methods: {
      // 1.调取接口
      async getDiscount() {
        this.isLoading = true
        const {
          result
        } = await getDiscount(this.params)
        console.log(result);
        this.isLoading = false
        this.discountList = result
        this.tabList = result.subTypes //导航栏数据
        result.subTypes.forEach(item => {
          if (item.goodsItems) {
            this.goodsList = [...this.goodsList, ...item.goodsItems.items]
            this.count = item.goodsItems.counts
          }
          // this.count = item.count
        })
        // console.log(this.goodsList);
      },
      changeActive(id) {
        this.params.subType = id
        this.params.page = 1
        this.goodsList = []
        this.getDiscount()
      },
      // 2. 下拉加载
      onReachBottom() {
        if (this.isLoading) return
        if (this.params.page * this.params.pageSize > this.count) return uni.$showMsg('数据加载完毕！')
        this.params.page += 1
        this.getDiscount()
      },
      // 跳转商品详情页
      gotoGoodsDetail(item) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?id=" + item.id
        })
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #f4f4f4;
  }

  .topcontainer {
    display: flex;
    width: 750rpx;
    height: 224rpx;
    position: fixed;
    top: 0;
    z-index: 998;

    image {
      width: 100%;
      height: 100%;
      border-radius: 0rpx 0rpx 40rpx 40rpx;
      psition: fixed;
    }
  }

  .tab {
    display: flex;
    position: fixed;
    top: 0;
    z-index: 999;
    // margin: 0 auto;
  }

  .tabbox {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    margin-top: 180rpx;
    border-radius: 10rpx;
    white-space: nowrap;
    margin-left: 20rpx;
  }

  .tabbox-item {
    width: 350rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    display: inline-block;
    margin: 30rpx auto 0 auto;

    // 激活项的样式
    &.active {
      border: aqua;
      // position: relative;
    }
  }


  .goods-list {
    width: 710rpx;
    background-color: f4f4f4;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    margin-top: 300rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .goods-list-item {
    width: 50%;

    // margin-bottom: 10px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;


    .everygoods {

      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      border-radius: 12rpx;


      image {
        width: 304rpx;
        height: 304rpx;
        padding-top: 24rpx;
      }

      .up {
        width: 300rpx;
        height: 60rpx;
        font-size: 26rpx;
        // word-break: break-all;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // overflow: hidden;
      }

      .down {
        width: 300rpx;
        height: 80rpx;
        font-size: 30rpx;
        color: red;
        line-height: 80rpx;
      }
    }

  }
</style>